Hexo + Github Pages搭建个人博客

发表于 | 更新于 | 阅读次数：

Hexo + GitHub Pages 可以更加专注于博客内容，而不是要如何搭建一个博客网站。

  • Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
  • GitHub Pages 是一个静态网站托管服务，直接从 Github 仓库托管你个人、公司或者项目页面 ，并且不需要你写任何后端语言来支持。GitHub Pages 的服务是免费的，但是也有一些限制*：
    • GitHub Pages 网站可能不超过1 GB
    • GitHub Pages 网站每月的带宽限制为100GB
    • GitHub Pages 每小时更新不超过 10 次

优点

  • 生成静态页面，访问速度快
  • 免费，不需要服务器不需要后台
  • 可以绑定自己的域名
  • 基于 Github 版本管理，可修改和恢复历史版本
  • 博客内容可以轻松打包、转移、发布到其它平台

准备工作

安装前，必须检查电脑中是否已安装下列应用程序：

  • NodeJS + NPM(速度慢，建议使用 cnpm 国内镜像)
  • Git

本文使用的环境

  • Window 10
  • NodeJS 8.9.3 + npm 5.5.1
  • Git 2.21.0
  • Hexo 3.8.0

设置 Git 和 GitHub Pages

检查确定 Git 连接到 Github。（具体参考Git安装教程）

SSH Key 配置——使用 ssh key 来解决本地和 Github 服务器的连接，获取 Github 权限。

1
2
3
$ cd ~/. ssh  #检查本机已存在的ssh密钥

ssh-keygen -t rsa -C "邮件地址"  # 配置SSH，找到并打开.ssh\id_rsa.pub文件内容，拷贝到Github -> Settings -> SSH and GPG keys -> New SSH key

创建仓库 Repo

新建一个 user.github.io 的仓库，例如用户名是naed，那么 naed.github.io 。（必须是自己的用户名）。

创建仓库

具体参考 GitHub Pages官方网站教程

绑定域名

  • 先ping 一下刚创建的 naed.github.io 获取IP
  • 域名解析，A类型以 @ 的记录指向IP，CNAME以 www 的记录指向域名 naed.github.io

// TODO，有待验证

ping仓库

使用 Hexo 搭建博客

Hexo 搭建的详细内容建议参考 Hexo官方文档

安装 Hexo

打开 Git bash 中执行 npm install -g hexo-cli 安装 Hexo

1
$ npm install -g hexo-cli

hexo安装成功

初始化 Hexo

两种方式进行初始化

  • 在路径 /d/Dean/Workspace/hexo/ 创建 blog 文件夹，在此打开 Git bash 执行命令 hexo init 进行初始化。(建议选择以后不随意变动的文件位置)
1
$ hexo init
  • 或者，打开 Git bash 用命令进入文件夹进行初始化
1
2
$ cd /d/Dean/Workspace/hexo/blog
$ hexo init

初始化

初始化完成后会生成目录结构。此路径 /d/Dean/Workspace/hexo/hexo/blog 将作为 Hexo 的根目录
目录结构

1
2
3
4
5
$ cd /d/Dean/Workspace/hexo/hexo/blog

$ ls
_config.yml  node_modules/  package-lock.json  scaffolds/  themes/
db.json      package.json   public/            source/

根目录ls

生成静态文件夹

执行命令 hexo d 生成网站静态文件到默认的 public 文件夹

1
$ hexo g

  • hexo g 是 hexo generate 的缩写
  • public 文件夹将会是 Github 上面显示的文件
    生成
    Github

启动本地服务器

1
$ hexo s

hexo s 是 hexo server 的缩写，启动本地服务器，可在浏览器输入 http://localhost:4000/ 打开预览。
启动Hexo
预览Hexo

通过Hexo更新到Github

  • 打开 Git bash 执行 npm install hexo-deployer-git --save 安装依赖包
  • 不安装可能会有报错 ERROR Deployer not found: git 的情况*。
1
$ npm install hexo-deployer-git --save

接着配置 _config.yml 中有关 deploy 的部分。（部署到 Github repo 仓库）

  • 打开 /d/Dean/Workspace/hexo/blog 文件夹的 _config.yml 文件
  • repo 建议使用 SSH ，repo 也可以是 repository
  • 在冒号后面必须有一个空格
1
2
3
4
deploy:
  type: git
  repo: git@github.com:Naed/naed.github.io.git
  branch: master

添加修改

完成添加后，在 Git bash 使用 hexo d 或者 hexo g -d 进行部署即会把修改的文件更新上传到 Github
更新成功

写博客

新建文章

在博客目录中打开 Git bash 中执行命令 hexo new "new post" 即可新建一个以 new post 为标题的 md 文件。

1
$ hexo new "new post"
  • Hexo 会在 source下的 _posts 里面生成相关 md 文件。
  • 编辑并保存md文件，在 Git bash 执行 hexo s -g， 打开 http://localhost:4000/ 刷新就能看到修改。（同一个文件继续编辑，直接刷新就能看到修改）
    new post

组合命令

1
2
3
4
hexo s -g  #生成并本地预览
hexo d -g  #生成并上传

hexo clean && hexo d -g  #清理缓存和生成上传

设置文章摘要

新建的文章，默认在列表页显示文章全文。在文章的 md 文件中，插入 <!-- more --> 到文章中，Hexo 会自动识别摘要并添加 Readmore 按钮。

1
<!-- more -->

readmore

效果

设置文章 Tags

打开新建的 md 文件，设置文章的 tags。

两种方式

1
2
3
title: Tags Testing Article
tags: [Testing, Another Tag]
---

或者

1
2
3
4
5
title: Tags Testing Article
tags:
  - Testing
  - Another Tag
---

tags

修改主题

NexT 主题安装

这里以主题 NexT 作为示例。

使用 Git 安装（这一方式将为你下载完整仓库，其中包含 .git 目录）

1
2
$ cd hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

git安装NexT

安装完成后，会在 themes 目录下找到
next

打开 _config.yml 并找到 theme 修改为 next ，接着执行 hexo clean 和 hexo g 重新生成进行启用新主题。

NexT 启用本地搜索

  • 安装。在 Hexo 的根目录 /d/Dean/Workspace/hexo/hexo/blog 的以下面的命令安装 hexo-generator-searchdb 
1
$ npm install hexo-generator-searchdb --save
  • Hexo 配置。在 Hexo 根目录的 _config.yml 文件添加以下内容
1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

Hexo配置search

  • NexT 配置。在 theme 文件夹进入 next 文件夹，打开 next 的 _config.yml 文件，启用本地搜索 enable: true
1
2
3
4
5
6
7
8
9
10
11
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: false
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # unescape html strings to the readable one
  unescape: false

NexT 其他设置

  • 参考 NexT User Docs – Starting to Use ，新建About页和tags页、设置sidebar头像、修改默认语言、sidebar返回顶部等。在themes/next/_config.yml 可以查看更多设置
  • 在主题 _config.yml 中的 busuanzi_count 启用 enable 不蒜子访客计数显示功能。执行 hexo d -g 部署到线上即可显示正常。

NexT 效果展示

NexT主题

Hexo 多台电脑设备同步管理

// TODO，后续更新

Hexo 常用命令

来源参考

hexo init

Hexo初始化

1
$ hexo init [folder]

  • 新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站

hexo s

启动本地服务器，默认访问地址： http://localhost:4000/

1
$ hexo s

  • hexo s 是 hexo server 的缩写，命令效果一致
  • 对 Hexo 根目录 _config.yml 的修改，需要重启本地服务器后才能预览效果
  • Ctrl + c 关闭 server

hexo new

新建标题为 new post 的文章

1
$ hexo new "new post"

  • 在博客目录下的 source -> _posts 文件夹中新建 md 文件，在标题可在对应 md 文件修改
  • 如果标题包含空格的话，请使用引号括起来

hexo d

1
$ hexo d
  • 部署。自动生成网站静态文件，并部署到设定的仓库
  • hexo d 是 hexo deploy 的缩写，命令效果一致

hexo clean

1
$ hexo clean
  • 清除缓存文件 db.json 和已生成的静态文件 public
  • 在某些情况（尤其是更换主题后），如果发现对站点的更改不生效，可能需要运行该命令

hexo g

1
$ hexo g
  • 编辑在博客目录下的 source -> _posts 文件夹中 md 文件，使用 hexo g 命令后，Hexo会把 md 文件生成 html 的网站静态页面到 public 文件夹
  • 便于查看网站生成的静态文件或者手动部署网站
  • hexo g 是 hexo generate 的缩写，命令效果一致

hexo new page

1
$ hexo new page Aboutme
  • 新建一个标题为 Aboutme 的页面，默认链接地址为 主页地址/aboutme/
  • 标题可以为中文，但一般习惯用英文
  • 页面标题和文章一样可以随意修改
  • 页面不会出现在首页文章列表和归档中，也不支持设置分类和标签

hexo version

1
$ hexo version
  • 显示 Hexo 版本

hexo help

1
$ hexo help
  • 查看帮助，指令和操作

help命令

来源参考